React useEvent: Стабілізація обробників подій для надійних застосунків

Використання `useEvent` на практиці

Давайте повернемося до попередніх прикладів і застосуємо `useEvent` для вирішення проблем.

Виправлення застарілих замикань

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Тепер `handleClick` є стабільною функцією, але при виклику вона отримує доступ до найновішого значення `count` через реф. Це запобігає проблемі застарілого замикання.

Запобігання зайвим повторним рендерам

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Оскільки `handleClick` тепер є стабільним посиланням на функцію, `ChildComponent` буде повторно рендеритися лише тоді, коли його пропси *насправді* змінюються, що покращує продуктивність.

Альтернативні реалізації та міркування

`useEvent` з `useLayoutEffect`

У деяких випадках вам може знадобитися використовувати `useLayoutEffect` замість `useEffect` в реалізації `useEvent`. `useLayoutEffect` спрацьовує синхронно після всіх мутацій DOM, але до того, як браузер має шанс зробити перемальовування. Це може бути важливим, якщо обробник події повинен читати або модифікувати DOM одразу після спрацьовування події. Це коригування гарантує, що ви захоплюєте найактуальніший стан DOM у вашому обробнику подій, запобігаючи потенційним невідповідностям між тим, що ваш компонент відображає, і даними, які він використовує. Вибір між `useEffect` і `useLayoutEffect` залежить від конкретних вимог вашого обробника подій та часу оновлення DOM.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Застереження та потенційні проблеми

• Складність: Хоча `useEvent` вирішує специфічні проблеми, він додає шар складності до вашого коду. Важливо розуміти основні концепції, щоб ефективно його використовувати.
• Надмірне використання: Не використовуйте `useEvent` без розбору. Застосовуйте його лише тоді, коли ви стикаєтеся із застарілими замиканнями або зайвими повторними рендерами, пов'язаними з обробниками подій.
• Тестування: Тестування компонентів, що використовують `useEvent`, вимагає ретельної уваги, щоб переконатися, що виконується правильна логіка обробника. Можливо, вам доведеться мокати хук `useEvent` або безпосередньо отримувати доступ до `handlerRef` у ваших тестах.

Глобальні перспективи обробки подій

При розробці застосунків для глобальної аудиторії вкрай важливо враховувати культурні відмінності та вимоги доступності в обробці подій:

• Навігація за допомогою клавіатури: Переконайтеся, що всі інтерактивні елементи доступні за допомогою клавіатурної навігації. Користувачі в різних регіонах можуть покладатися на навігацію за допомогою клавіатури через обмежені можливості або особисті вподобання.
• Сенсорні події: Підтримуйте сенсорні події для користувачів мобільних пристроїв. Враховуйте регіони, де мобільний доступ до Інтернету є більш поширеним, ніж доступ з настільних комп'ютерів.
• Методи введення: Пам'ятайте про різні методи введення, які використовуються по всьому світу, такі як китайські, японські та корейські методи введення. Протестуйте свій застосунок з цими методами введення, щоб переконатися, що події обробляються правильно.
• Доступність: Завжди дотримуйтесь найкращих практик доступності, забезпечуючи сумісність ваших обробників подій зі зчитувачами екрана та іншими допоміжними технологіями. Це особливо важливо для інклюзивного користувацького досвіду в різних культурних середовищах.
• Часові пояси та формати дати/часу: При роботі з подіями, що включають дати та час (наприклад, інструменти планування, календарі зустрічей), пам'ятайте про часові пояси та формати дати/часу, які використовуються в різних регіонах. Надайте користувачам можливість налаштовувати ці параметри відповідно до їхнього місцезнаходження.

Альтернативи `useEvent`

Хоча `useEvent` є потужною технікою, існують альтернативні підходи до керування обробниками подій у React:

• Підняття стану (Lifting State): Іноді найкращим рішенням є підняття стану, від якого залежить обробник події, до компонента вищого рівня. Це може спростити обробник події та усунути необхідність у `useEvent`.
• `useReducer`:** Якщо логіка стану вашого компонента складна, `useReducer` може допомогти керувати оновленнями стану більш передбачувано та зменшити ймовірність застарілих замикань.
• Класові компоненти: Хоча вони менш поширені в сучасному React, класові компоненти надають природний спосіб прив'язки обробників подій до екземпляра компонента, уникаючи проблеми замикання.
• Вбудовані функції із залежностями: Використовуйте вбудовані виклики функцій із залежностями, щоб гарантувати передачу свіжих значень обробникам подій. `onClick={() => handleClick(arg1, arg2)}` з `arg1` та `arg2`, оновленими через стан, створюватиме нову анонімну функцію при кожному рендері, забезпечуючи таким чином оновлені значення замикань, але це спричинить зайві повторні рендери, що саме `useEvent` і вирішує.